<template>
  <PageWrapper v-loading="loading" loading-tip="加载中...">
    <div class="p-4 p-4-tag">
      <div class="tag">
        <BasicTable @register="registerTable">
          <template #bodyCell="{ column, record }">
            <template v-if="column.key === 'action'">
              <TableAction
                :actions="[
                  {
                    label: '加载',
                    icon: 'ant-design:setting-outlined',
                    ifShow: hasPermission('12-3-load'),
                    onClick: handleSet.bind(null, record),
                  },
                  // {
                  //   label: '复制',
                  //   icon: 'ant-design:copy-outlined',
                  //   onClick: handleCopy.bind(null, record),
                  // },
                  {
                    label: '删除',
                    icon: 'ant-design:delete-outlined',
                    ifShow: hasPermission('12-3-del'),
                    onClick: handleDelete.bind(null, record),
                  },
                ]"
              />
            </template>
          </template>
          <template #toolbar>
            <a-button type="primary" @click="handleAdd" v-if="hasPermission('12-3-add')">
              新增
            </a-button>
          </template>
        </BasicTable>
      </div>
    </div>
    <modelByDetail
      @register="registerByDetail"
      @submit-success="handleUpdateTable"
      :info="detailForm"
    />
  </PageWrapper>
</template>

<script setup lang="ts">
  import { PageWrapper } from '/@/components/Page';
  import { BasicTable, TableAction, useTable } from '/@/components/Table';
  import { BasicColumn } from '/@/components/Table/src/types/table';
  import modelByDetail from '/@/views/project/engineering/components/modelByDetail.vue';
  import { useModal } from '/@/components/Modal';
  import { useMessage } from '/@/hooks/web/useMessage';
  import { useI18n } from '/@/hooks/web/useI18n';
  import { usePermission } from '/@/hooks/web/usePermission';
  import { getAllProject, deleteProject, setProject } from '/@/api/server/project';
  import { ref, onMounted, reactive, h } from 'vue';

  const { hasPermission } = usePermission();
  let loading = ref<boolean>(false);
  let detailForm = reactive({
    type: 'add',
    data: {},
  });
  // 表单数据
  let columns: BasicColumn[] = [
    {
      title: '文件名',
      dataIndex: 'Name',
    },
    {
      title: '路径',
      dataIndex: 'FullName',
    },
    {
      title: '创建时间',
      dataIndex: 'CreateTime',
    },
    {
      title: '修改时间',
      dataIndex: 'ModifyTime',
    },
    {
      title: '描述',
      dataIndex: 'Description',
    },
  ];
  let actionColumn = {
    width: 250,
    title: '操作',
    dataIndex: 'action',
    // slots: { customRender: 'action' },
  };
  const [registerTable, { reload }] = useTable({
    title: '',
    api: getAllProject,
    immediate: false,
    columns,
    pagination: false,
    actionColumn: hasPermission(['12-3-load', '12-3-del']) ? actionColumn : undefined,
    canResize: false,
    showIndexColumn: false,
    striped: true,
    bordered: true,

    // afterFetch: (v) => {
    //   return v.map((item) => {
    //     return item;
    //   });
    // },
  });
  const { createConfirm, createMessage } = useMessage();
  const { t } = useI18n();

  const [registerByDetail, { openModal: openModalByDetail, closeModal: closeModalByDetail }] =
    useModal();
  onMounted(async () => {
    reload();
  });

  function handleCopy(_record) {
    detailForm.type = 'copy';
    detailForm.data = _record;
    openModalByDetail();
  }
  function handleDelete(_record) {
    createConfirm({
      iconType: 'warning',
      okText: '确认',
      title: () => h('span', '温馨提示'),
      content: () => h('span', `是否确认删除该文件（${_record.Name}）`),
      onOk: async () => {
        try {
          let list = _record.FullName.split(`${_record.Name}.`);
          let target = list.length > 0 ? list[0] : '';
          await deleteProject([target]);
          createMessage.success(t('layout.setting.operatingTitle'));
          reload();
        } catch (error) {}
      },
    });
  }
  function handleSet(_record) {
    createConfirm({
      iconType: 'warning',
      okText: '确认',
      title: () => h('span', '温馨提示'),
      content: () => h('span', `是否确认加载该文件（${_record.Name}）`),
      onOk: async () => {
        try {
          await setProject([_record.FullName]);
          createMessage.success(t('layout.setting.operatingTitle'));
          reload();
        } catch (error) {}
      },
    });
  }
  function handleUpdateTable() {
    closeModalByDetail();
    setTimeout(() => {
      reload();
    }, 250);
  }
  function handleAdd() {
    detailForm.type = 'add';
    detailForm.data = {};
    openModalByDetail();
  }
</script>
<script lang="ts">
  export default {
    name: 'EngineeringIndexPage',
  };
</script>
<style lang="less" scoped>
  .p-4-tag {
    width: 100%;
    height: 100%;
    padding: 0px !important;

    .tag {
      position: relative;
      overflow: hidden;
      height: 100%;
      background-color: #fff;
    }
  }
</style>
